<template>
  <el-dialog v-el-drag-dialog :visible.sync="dialogVisible" :close-on-click-modal="false" :width="winWidth+'px'" :title="dialogTitle">
    <div v-if="hint!==null" v-html="hint" />
    <div v-if="dialogVisible" class="select-dialog-container" :style="{'padding-top':(hint===null || hint === '') ? '0' : ''}">
      <!-- 全选 -->
      <div v-if="multiple" style="margin-bottom:5px">
        <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">全选</el-checkbox>
      </div>
      <!-- 单选 -->
      <el-radio-group v-if="!multiple" v-model="selected">
        <el-radio v-for="(item,index) in itemList" :key="index" :label="item.value">{{ item.text }}</el-radio>
      </el-radio-group>
      <!-- 复选 -->
      <el-checkbox-group v-if="multiple" v-model="selected" class="select-dialog-checkbox" @change="handleCheckedChange">
        <el-checkbox v-for="(item,index) in itemList" :key="index" :label="item.value">{{ item.text }}</el-checkbox>
      </el-checkbox-group>

    </div>

    <div slot="footer" class="dialog-footer">
      <el-button plain icon="el-icon-close" @click="closeDialog">取 消</el-button>
      <el-button type="primary" icon="el-icon-check" @click="submitForm">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
    components: {

    },
    props: {

    },
    data() {
        return {
            name: '',
            dialogTitle: '请选择',
            hint: null,
            winWidth: 500,
            dialogVisible: false,
            itemList: [],
            selected: null,
            callback: null,
            errors: [],
            multiple: false,
            checkAll: false,
            isIndeterminate: false
        }
    },
    computed: {

    },
    watch: {

    },
    created() {
        this.$bus.on('openListitemDialog', this.openListitemDialog)
    },
    beforeDestroy() {
        this.$bus.off('openListitemDialog', this.openListitemDialog)
    },
    mounted() {

    },
    methods: {
        /**
         * title：对话框标题
         * itemList：候选项列表，[{'text':'列表项名称':'value':value}]
         * callback：回调函数，成功返回值：{ code: 'success', value: this.selected }，失败返回值：{ code: 'cancel', value: '' }
         * selected：已经选择的项目，itemList的value值字符串
         * name：用于生成错误提示信息的属性名称，为空时从对话框标题中获取
         * hint：显示在候选列表项上方，列表项的提示信息
         * multiple：是否可多选
         */
        openListitemDialog(title, itemList, callback, selected, name, hint, multiple) {
            if (title !== null) {
                this.dialogTitle = title
            }
            this.itemList = itemList
            this.callback = callback
            this.multiple = multiple === undefined ? false : multiple

            if (selected !== undefined && selected != null && selected !== '') {
                if (typeof selected === 'string' && multiple) {
                    this.selected = selected.split(',')
                } else {
                    this.selected = selected
                }
            } else if (multiple) {
                this.selected = []
            } else {
                this.selected = null
            }

            if (name !== undefined && name !== null) {
                this.name = name
            } else {
                this.name = this.dialogTitle.replace('请选择', '').replace('选择', '')
            }
            this.hint = hint

            this.dialogVisible = true
        },
        handleCheckAllChange(val) {
            if (val) {
                this.checkAll = true
                this.isIndeterminate = false
                this.selected = []
                this.itemList.forEach(item => {
                    this.selected.push(item.value)
                })
            } else {
                this.checkAll = false
                this.isIndeterminate = false
                this.selected = []
            }
        },
        handleCheckedChange(val) {
            if (val.length === this.itemList.length) {
                this.checkAll = true
                this.isIndeterminate = false
            } else if (val.length === 0) {
                this.checkAll = false
                this.isIndeterminate = false
            } else if (val.length > 0 && val.length < this.itemList.length) {
                this.checkAll = false
                this.isIndeterminate = true
            }
        },
        submitForm() {
            if (this.selected && ((this.selected.length > 0) || (!this.multiple && this.selected !== null && this.selected !== '' && (typeof this.selected === 'object')))) {
                this.callback({ code: 'success', value: this.selected })
                this.dialogVisible = false
            } else {
                this.$alert('请选择' + this.name, '操作提示', { type: 'warning' })
            }
        },
        closeDialog() {
            this.callback({ code: 'cancel', value: '' })
            this.dialogVisible = false
        }
    }
}
</script>

<style scoped lang="scss">
@import "~@/wapp/common/styles/variables.scss";

.select-dialog-container{
    min-height: 100px;
    padding-top: 20px;
    height: 300px;
    overflow-y: auto;
    .el-checkbox{
        width: 100%;
        margin-right: 0;
        &:not(:first-child){margin-top: 5px;}
    }
    /deep/ .is-checked .el-checkbox__label{
        color: inherit;
    }
}
/deep/ .el-radio-group{
    label{
        display: block;
        line-height:25px;
    }
    .el-radio__label{
        font-size: $contentFontSize
    }
}

</style>
